<template>
  <div class="header-select task-flex task-ai">
    <div class="team-select">
      <biz-team-select :value="team" multiple is-auto-select-child collapse @input="update" :fetch-func="fetchTeam"/>
    </div>
    <div class="task-ml15 task-span1">
      <el-select 
        v-model="principal"
        :placeholder="$t('report.abnormalList.placeholder1')" 
        multiple 
        filterable 
        remote
        clearable 
        @change="excutorName"
        collapse-tags
        :remote-method="remoteMethod"
        v-el-select-loadmore="loadmoreOptions"
      >
        <el-option
          v-for="item in principalList"
          :key="item.userId"
          :label="item.displayName"
          :value="item.userId"
          :origin="item"
        >
          <template v-if="isOpenData">
            <open-data type='userName' :openid="item.staffId"></open-data>
          </template>
        </el-option>
        
        <template slot="multiple" slot-scope="{ item }">
          <template v-if="isOpenData">
            <open-data type="userName" :openid="item.staffId"></open-data>
          </template>
          <template v-else>
            {{ item.displayName || item.name}}
          </template>
        </template>
        
      </el-select>
    </div>

    <div class="header-select-time">
      <el-date-picker
        v-model="dataTime"
        type="datetimerange"
        align="right"
        unlink-panels
        value-format="timestamp"
        :range-separator="$t('common.base.to')"
        :start-placeholder="$t('common.base.startTime')"
        :end-placeholder="$t('common.base.endTime')"
        @change="ceratTime"
        :picker-options="pickerOptions"
        :default-time="['00:00:00', '23:59:59']"
      >
      </el-date-picker>
    </div>

  </div>
</template>
<script>
/* api */
import * as ReportApi from '@src/api/ReportApi.ts';

import http from 'src/util/HttpUtil';

import { formatDate, useDatePicker, nearDateBy, dayTimeEnd } from 'pub-bbx-utils';
import { isOpenData } from '@src/util/platform'
import { safeNewDate } from '@src/util/time'
import { t } from '@src/locales'
export default {
  name: 'header-select',
  props: {
    columnar: {
      type: String,
    }
  },
  data() {
    const startTime = +nearDateBy(1, 'week')
    const endTime = +dayTimeEnd()
    const { today, yesterday, nearDate } = useDatePicker()
    return {
      isOpenData,
      team: [], // 选中的团队
      principalList: [], // 负责人列表
      principal: '', // 负责人
      dataTime: [startTime, endTime], // 时间
      pickerOptions: {
        shortcuts: [
          today(t('common.time.today')),
          yesterday(t('common.time.yesterday')),
          nearDate(t('common.time.lastWeek'), 1, 'week'),
          nearDate(t('common.time.lastMonth'), 1, 'month'),
          nearDate(t('common.time.lastThreeMonth'), 3, 'month'),
        ],
      },

      total: 0, // 人员总数
      personSearchInfo: {
        userName: '',
        pageNum: 1, // 第几页
      },
      loadmoreOptions: { // 分页配置
        disabled: false,
        callback: this.loadmore,
        distance: 10
      },
    }
  },
  mounted() {
    this.teamUser()

    this.$emit('ceratTime', {name: this.columnar, event: this.dataTime})
  },
  methods: {
    /** 获取负责人 */
    async teamUser(teamId = '') {
      try {
        const { pageNum, userName } = this.personSearchInfo;
        const params = {
          queryAll: true,
          teamId: this.team.map(item => {return item.id}).join(','),
          pageNum,
          pageSize: 10,
          userName
        }

        const { code, data, msg } = await ReportApi.getPcTeamUser(params);
        if(code !== 200) return;

        this.total = data.totalCount;
        this.principalList = this.principalList.concat(data.baseUserDTOList);
      }catch(e) {
        console.log('headerSelect.vue/teamUser', e);
      }
    },
    // 人员搜索
    remoteMethod(query = '') {
      this.personSearchInfo.pageNum = 1;
      this.personSearchInfo.userName = query;
      this.principalList = [];
      this.teamUser();
    },
    // 分页
    loadmore(){
      if(this.principalList.length === this.total) return;
      
      this.personSearchInfo.pageNum++;
      this.teamUser();
    },
    /* 团队选者 */
    update(event) {
      this.team = event.map(item => {return item})
      let ids = event.map(item => {
        return item.id
      }).join(',')

      this.principal = [];
      this.remoteMethod();
      this.$emit('update', {name: this.columnar, ids})
    },
    excutorName(event) {
      this.$emit('excutorName', {name: this.columnar, event})
    },
    ceratTime(event) {
      let data = event ? event : ['', '']
      this.$emit('ceratTime', {name: this.columnar, event: data})
    },
    fetchTeam(params){
      return http.post('/security/tag/tree', {...params, ...{authKey: 'VIP_REPORT_VIEW'}})
    },
  }
}
</script>
<style lang="scss" scoped>
.team-select, .principal-list,.time {
  width: 200px!important;
}
</style>